<!DOCTYPE>
<html>
<head>
<title>Q.addClass Q.removeClass | QLib </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 使用QLib控件是必须包含样式表 -->
<link type="text/css" rel="stylesheet" href="../ui.css" />
<style>

#class_object {
  background: #999;
  width: 260px;
  height: 200px;
}

#class_object.red-background {
  background: red;
}

</style>

<!--  
  提示：src="{QLib目录}/Q.js" 
  根据实际存放路径， 测试代码都是在QLib目录的samples文件夹下，所以这里用的是"../Q.js" 
-->
<script type="text/javascript" src="../src/Q.js"></script>

<script>
<!--
Q.ready(function() {
  Q.$('btn-add').onclick=function() {
    Q.addClass(Q.$('class_object'), 'red-background');
  }
  
  Q.$('btn-remove').onclick=function() {
    Q.removeClass(Q.$('class_object'), 'red-background');
  }
});
-->
</script>
</head>
<body onmouseup="document.selection && document.selection.empty()" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy="document.selection.empty()" onselect="document.selection.empty()">

<p>Q.addClass/Q.removeClass示例</p>
<hr>
<br/>
<button id="btn-add">Q.addClass</button>
<button id="btn-remove">Q.removeClass</button>
<br>
<br>

<div id="class_object">
  content 
</div>

<br>
<br>
<br>
<br>
<br>



</body>
</html>
